import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/loading.dart';
import 'package:macnov/common/search_box.dart';
import 'package:macnov/models/budget.dart';
import 'package:macnov/stores/budget.dart';
import 'package:macnov/utils/colorUtil.dart';

class BudgetList extends StatelessWidget {
  _renderAmount(BudgetModel budget) {
    var amountStr = budget.unassigned;
    return Text(r'$' + amountStr.toString(),
        style: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: 18,
            color: ColorsUtil.hexColor(0x282828)));
  }

  void _goDetail(BuildContext context, BudgetModel budget) {
    budgetStore.loadBudgetMembers(budget.budgetId);
    Navigator.pushNamed(context, '/owner/budget_detail', arguments: budget);
  }

  List<Widget> _renderList(BuildContext context) {
    if (budgetStore.budgets.length == 0) return [Loading()];
    return budgetStore.filterBudgets
        .map((budget) => Card(
              child: ListTile(
                onTap: () => _goDetail(context, budget),
                title: Text(
                  budget.name,
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: ColorsUtil.hexColor(0x282828)),
                ),
                subtitle: Text(
                  "${budget.budgetType}",
                ),
                trailing: this._renderAmount(budget),
              ),
            ))
        .toList();
  }

  _search(text) {
    if (null != text) {
      budgetStore.filter(text);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) => Stack(
        children: <Widget>[
          Positioned(
            left: 0,
            right: 0,
            top: 10,
            child: Container(
              margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: SearchBox(
                onChange: _search,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.fromLTRB(0, 60, 0, 0),
            child: ListView(
              // shrinkWrap: true,
              children: _renderList(context),
            ),
          )
        ],
      ),
    );
  }
}
